<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">我的订单</view>
    </view>

    <view class="box">
      <view class="commodity">
        <view class="commodity_img" v-if="detail.file_url">
          <image :src="detail.file_url" mode=""></image>
        </view>
        <view class="commodity_information">
          <view class="information_title">{{
            detail.name || detail.title
          }}</view>
          <view class="information_num">数量：1</view>
          <view class="information_price">
            <view class="information_price_color"
              >￥{{ priceDetail.total_price }}</view
            >
            <view>合计</view>
          </view>
        </view>
      </view>
      <view class="price">
        <view class="subtotal">
          <view class="subtotal_left">商品小计</view>
          <view class="subtotal_right">￥{{ priceDetail.total_price }}</view>
        </view>
        <view class="amount">
          <view class="amount_left">应付金额合计</view>
          <view class="amount_right">￥{{ priceDetail.total_price }}</view>
        </view>
      </view>
      <view class="other">
        <view class="other_item">
          <view class="coupon">优惠券</view>
          <view class="coupon_select" @click="goCoupon">
            {{ couponText }}
            <u-icon name="arrow-right" color="#ADADAD"></u-icon>
          </view>
        </view>
        <view class="other_item">
          <view class="coupon">优惠金额</view>
          <view class="coupon_select">￥{{ priceDetail.coupon_price }}</view>
        </view>
        <view class="other_item other_item1">
          <view class="coupon">积分</view>
          <view class="coupon_select" @click="goCoupon">
            <u-checkbox-group
              v-model="checkboxValue1"
              placement="column"
              @change="checkboxChange"
            >
              <u-checkbox
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                activeColor="#55b877"
                shape="circle"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
        <view class="other_item other_item1">
          <view class="coupon">积分金额</view>
          <view class="coupon_select">￥{{ priceDetail.integral_price }}</view>
        </view>
      </view>
    </view>
    <view class="bottom_btn">
      <view class="btn_item"></view>
      <view class="btn_item">
        合计：
        <view class="btn_item_price">￥{{ priceDetail.pay_price }}</view>
      </view>
      <view class="btn_item">
        <view class="pay_btn" @click="payment">立即支付</view>
      </view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>
  
  <script>
import storage from "@/common/storage"; // 缓存封装
export default {
  components: {},

  data() {
    return {
      height: 0,
      statusBarHeight: 0,
      detail: {},
      checkboxValue1: [],
      checkboxList1: [
        {
          name: "是否使用积分",
          disabled: false,
        },
      ],
      coupon_id: 0,
      priceDetail: {},
      couponText: "选择优惠券",
      couponId: 0,
      from: "",
      id: "",
      type: 0,
    };
  },
  onShow: function () {
    console.log(storage.getJson("coupon"), 11111111);
    if (storage.getJson("coupon")) {
      this.couponText = storage.getJson("coupon").couponText;
      this.couponId = storage.getJson("coupon").couponId;
      if (this.from == "yitian") {
        this.getDetail();
      }
      if (this.from == "daohang") {
        this.getDaohangDetail();
      }
      if (this.from == "kechengDacheng") {
        this.getDachengxuetang();
      }
      this.getPrice();
    }
  },
  async onLoad(options) {
    this.from = options.from;
    this.id = options.id;
    this.type = options.type;

    if (this.from == "yitian") {
      // 一田详情
      await this.getDetail();
    } else if (this.from == "daohang") {
      // 导航奥义详情
      await this.getDaohangDetail();
    } else if (this.from == "kechengDacheng") {
      // 大成课程详情
      await this.getDachengxuetang();
    }  else {
      // 课程详情
      // this.detail = Object(options.detail);
      this.detail = JSON.parse(options.detail);
      // console.log(this.detail,'课程')
    }
    console.log(this.detail, 222222222);
    this.getPrice();
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
      storage.remove("coupon");
    },
    goCoupon() {
      uni.navigateTo({
        url: "/pages/training/coupon",
      });
    },
    copy(str) {
      uni.setClipboardData({
        data: str,
        success: function () {
          console.log("复制成功", str);
        },
      });
    },
    checkboxChange(n) {
      //   console.log("change", n);
      //   if(n.length){
      //     this.points = 1
      //   } else {
      //     this.points = 1
      //   }

      setTimeout(async () => {
        console.log(this.checkboxValue1);
        await this.getPrice();
      }, 1);
    },
    // 问道山详情
    getDetail() {
      this.$http
        .yitianDetail({ id: this.id })
        .then((res) => {
          let data = res;
          this.detail = data.data.detail;
          // this.xiaoyaoList = data;
          console.log(this.detail, "问道山详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 导航要以详情
    getDaohangDetail() {
      this.$http
        .daohangyiYaoyi_info({ id: this.id })
        .then((res) => {
          let data = res;
          this.detail = data.data.info;
          // this.xiaoyaoList = data;
          console.log(this.detail, "导航要义详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 大成学堂详情
    getDachengxuetang() {
      this.$http
        .kechengDachengxuetang({ id: this.id })
        .then((res) => {
          this.detail = res.data.list;
          console.log(this.detail, "大成学堂1");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    getPrice() {
      if (this.from == "kecheng") {
        this.$http
          .kechengGet_pay_price({
            id: this.detail.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            console.log(this.priceDetail, "课程价格详情");
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if (this.from == "yitian") {
        this.$http
          .yitianGet_pay_price({
            id: this.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            console.log(this.priceDetail, "一田价格详情");
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if (this.from == "daohang") {
        this.$http
          .daohangyiGet_pay_price({
            id: this.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            console.log(this.priceDetail, "一田价格详情");
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if(this.from == "kechengDacheng"){
        this.$http
          .kechengGet_pay_price_dacheng({
            id: this.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            console.log(this.priceDetail, "大成课程价格详情");
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      }
    },
    payment() {
      if (this.from == "kecheng") {
        this.$http
          .kechengBuy_kecheng({
            id: this.detail.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            // this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            uni.$u.toast(res.message);
            console.log(res, "购买课程");
            setTimeout(() => {
              storage.remove("coupon");
              uni.redirectTo({
                url: `/pages/integral/payment?type=${this.type}&price=${
                  res.data.info.pay_price
                }&from=kecheng&id=${this.detail.id}&detail=${JSON.stringify(
                  res.data.info
                )}`,
              });
            }, 1000);
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if (this.from == "daohang") {
        this.$http
          .daohangyiBuy_yaoyi({
            id: this.detail.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            // this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            uni.$u.toast(res.message);
            console.log(res, "购买导航要以");
            setTimeout(() => {
              storage.remove("coupon");
              uni.redirectTo({
                url: `/pages/integral/payment?price=${
                  res.data.info.pay_price
                }&from=daohang&id=${this.detail.id}&detail=${JSON.stringify(
                  res.data.info
                )}`,
              });
            }, 1000);
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if (this.from == "yitian") {
        this.$http
          .yitianBuy_wendao({
            id: this.detail.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            // this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            uni.$u.toast(res.message);
            console.log(res, "购买一田");
            setTimeout(() => {
              storage.remove("coupon");
              uni.redirectTo({
                url: `/pages/integral/payment?price=${
                  res.data.info.pay_price
                }&from=wendaoshan&id=${this.detail.id}&detail=${JSON.stringify(
                  res.data.info
                )}`,
              });
            }, 1000);
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      } else if (this.from == "kechengDacheng") {
        this.$http
          .buy_kecheng_dacheng({
            id: this.detail.id,
            coupon_id: this.couponId,
            points: this.checkboxValue1.length,
          })
          .then((res) => {
            // this.priceDetail = res.data.info;
            // this.xiaoyaoList = data;
            uni.$u.toast(res.message);
            console.log(res, "购买大成课程");
            setTimeout(() => {
              storage.remove("coupon");
              uni.redirectTo({
                url: `/pages/integral/payment?price=${
                  res.data.info.pay_price
                }&from=wendaoshan&id=${this.detail.id}&detail=${JSON.stringify(
                  res.data.info
                )}`,
              });
            }, 1000);
          })
          .catch((error) => {
            uni.$u.toast(error);
          });
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  .commodity {
    padding: 32rpx 30rpx;
    background: #f7f8fa;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    .commodity_img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 24rpx;
      image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 24rpx;
      }
    }
    .commodity_information {
      margin-left: 30rpx;
      .information_title {
        width: 420rpx;
        font-size: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .information_num {
        font-size: 28rpx;
        color: #adadad;
        margin-top: 16rpx;
      }
      .information_price {
        font-size: 28rpx;
        color: #444444;
        margin-top: 36rpx;
        display: flex;
        flex-flow: row-reverse;
        .information_price_color {
          color: #ff8a4c;
        }
      }
    }
  }
  .price {
    padding: 32rpx 30rpx;
    background: #f7f8fa;
    border-radius: 24rpx;
    margin-top: 32rpx;
    .subtotal {
      display: flex;
      justify-content: space-between;
      .subtotal_left {
        font-size: 28rpx;
        color: #888888;
      }
      .subtotal_right {
        font-size: 28rpx;
        color: #444444;
      }
    }
    .amount {
      display: flex;
      justify-content: space-between;
      margin-top: 63rpx;
      .amount_left {
        font-size: 28rpx;
        color: #888888;
      }
      .amount_right {
        font-size: 28rpx;
        color: #ff8a4c;
      }
    }
  }
  .other {
    padding: 32rpx 30rpx 16rpx 30rpx;
    background: #f7f8fa;
    border-radius: 24rpx;
    margin-top: 32rpx;
    .other_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;
      .coupon {
        font-size: 28rpx;
        color: #888888;
      }
      .coupon_select {
        font-size: 28rpx;
        color: #444444;
        display: flex;
        align-items: center;
        .copy {
          color: #55b877;
          margin-left: 16rpx;
        }
      }
    }
    .other_item1 {
      margin-bottom: 0;
    }
  }
}
.bottom_btn {
  width: 100%;
  display: flex;
  // justify-content: space-between;
  justify-content: flex-end;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 33rpx 30rpx;
  box-sizing: border-box;
  box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  .btn_item {
    // width: 232rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30rpx;
    .btn_item_price {
      color: #ff8a4c;
    }
    .pay_btn {
      width: 232rpx;
      height: 78rpx;
      background: #55b877;
      border-radius: 39rpx 39rpx 39rpx 39rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>